<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="$t('info')"
      width="80% "
      @close="close"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :disabled="operation === 0"
      >
        <el-descriptions
          class="margin-top"
          :title="$t('BasicInformation')"
          :column="2"
          border
          style="width: 80%; margin: 0 auto"
        >
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.logisticsDocumentNumber") }}
            </template>
            {{ detailDataForm.trackingNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.dataSources") }}
            </template>
            <!-- TODO -->
            {{ detailDataForm.source }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.rigDocNo") }}
            </template>
            {{ detailDataForm.platformOrderNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.logisticsProducts") }}
            </template>
            {{ detailDataForm.channelName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.providerNo") }}
            </template>
            {{ detailDataForm.providerTrackingNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.countryOfDestination") }}
            </template>
            {{ detailDataForm.regionName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.weight") }}
            </template>
            {{ detailDataForm.weight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.providerChannel") }}
            </template>
            {{ detailDataForm.providerChannelName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.size") }}
            </template>
            {{ detailDataForm.size }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.provider") }}
            </template>
            {{ detailDataForm.providerName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.volumeWeight") }}
            </template>
            {{ detailDataForm.volumeWeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.bubbleCoefficient") }}
            </template>
            {{ detailDataForm.bubbleCoefficient }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("unitLang.billingWeight") }}
            </template>
            {{ detailDataForm.billingWeight }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("outboundOrderLang.channelOwner") }}
            </template>
            {{ detailDataForm.channelBusinessOwnerName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.customerName") }}
            </template>
            {{ detailDataForm.customerName }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.customerService')"
          >
            {{ detailDataForm.customerServicePersonName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.managerPerson") }}
            </template>
            {{ detailDataForm.managerPerson }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          :title="$t('outboundOrderLang.recipientInformation')"
          :column="2"
          border
          style="width: 80%; margin: 0 auto"
        >
          <el-descriptions-item :label="$t('outboundOrderLang.recipient')">
            {{ detailDataForm.receiveName }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipientCompany')"
          >
            {{ detailDataForm.receiveCompany }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipientTaxNumber')"
          >
            {{ detailDataForm.receiveTax }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipientLicenseNumber')"
          >
            {{ detailDataForm.receiveIdCard }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('outboundOrderLang.recipientPhone')">
            {{ detailDataForm.receiveTel }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="$t('outboundOrderLang.recipientMobilePhone')"
          >
            {{ detailDataForm.receiveTelMobile }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('depotLang.country')">
            {{ detailDataForm.receiveCountry }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('depotLang.provinceStates')">
            {{ detailDataForm.receiveProvince }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('depotLang.address')">
            {{ detailDataForm.receiveAddr }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <h3>其他信息</h3>
      <div>
        <el-tabs type="border-card">
          <!-- 订单产品 -->
          <el-tab-pane :label="$t('outboundOrderLang.orderProducts')" name="0">
            <el-table v-loading="goodsLoading" :data="goodsData" border>
              <el-table-column
                type="index"
                :label="$t('tableIndex')"
                width="55"
                align="center"
                fixed="left"
              />
              <el-table-column
                :label="$t('OMSLang.itemCn')"
                min-width="100"
                align="center"
                prop="goodsName"
              />
              <el-table-column
                :label="$t('OMSLang.itemEn')"
                min-width="100"
                align="center"
                prop="itemEn"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                min-width="120"
                align="center"
                prop="goodsSkuCode"
              />
              <el-table-column
                :label="$t('OMSLang.itemUnitPrice')"
                min-width="80"
                align="center"
                prop="declaredCnyPrice"
              />
              <el-table-column
                :label="$t('unitLang.weight')"
                min-width="80"
                align="center"
                prop="weiskuWeightght"
              />
              <el-table-column
                :label="$t('number')"
                min-width="80"
                align="center"
                prop="goodsQuantity"
              />
              <el-table-column
                :label="$t('OMSLang.itemLink')"
                min-width="150"
                align="center"
                prop="itemLink"
              />
              <el-table-column
                :label="$t('categoryLang.hsCode')"
                min-width="150"
                align="center"
                prop="hsCode"
              />
            </el-table>
          </el-tab-pane>
          <!-- 操作记录 -->
          <el-tab-pane
            :label="$t('outboundOrderLang.operationRecord')"
            name="1"
          >
            <el-table v-loading="logLoading" :data="logData" border>
              <el-table-column
                type="index"
                :label="$t('tableIndex')"
                width="55px"
                align="center"
                fixed="left"
              />
              <el-table-column
                :label="$t('harvestLang.operationNode')"
                min-width="150"
                align="center"
                prop="operationNodeName"
              />
              <el-table-column
                :label="$t('OMSLang.operationResult')"
                min-width="150"
                align="center"
                prop="operationResult"
              />
              <el-table-column
                :label="$t('OMSLang.location')"
                min-width="150"
                align="center"
                prop="location"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                min-width="150"
                align="center"
                prop="operationPersonName"
              />
              <el-table-column
                :label="$t('operationDate')"
                min-width="150"
                align="center"
                prop="operationTime"
              />
            </el-table>
          </el-tab-pane>
          <!-- 订单日志-->
          <el-tab-pane :label="$t('outboundOrderLang.orderLog')" name="2">
            <el-table
              v-loading="orderLogLoading"
              :data="orderLogData"
              border
              class="mt-10"
            >
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="55"
                fixed="left"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.dateInfo')"
                prop="dateInfo"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('outboundOrderLang.statusBeforeModification')"
                prop="statusAfterModification"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('outboundOrderLang.statusAfterModification')"
                prop="statusAfterModification"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('harvestLang.modification')"
                prop="modification"
                align="center"
                min-width="200"
              />
              <el-table-column
                :label="$t('harvestLang.modifiedRemarks')"
                prop="modifiedRemarks"
                align="center"
                min-width="150"
              />
            </el-table>
          </el-tab-pane>
          <!-- 订单API日志 -->
          <el-tab-pane :label="$t('outboundOrderLang.orderApiLog')" name="3">
            <el-table v-loading="apiLoading" :data="apiData" border>
              <el-table-column
                type="index"
                :label="$t('tableIndex')"
                width="55px"
                align="center"
                fixed="left"
              />
              <el-table-column
                :label="$t('warehouseEntryLang.provider')"
                min-width="150"
                align="center"
                prop="providerName"
              />
              <el-table-column
                :label="$t('harvestLang.providerChannel')"
                min-width="150"
                align="center"
                prop="providerChannelName"
              />
              <el-table-column
                :label="$t('statusLang.status')"
                min-width="150"
                align="center"
                prop="status"
              />
              <el-table-column
                :label="$t('outboundOrderLang.failureReason')"
                min-width="150"
                align="center"
                prop="failureReason"
              />
              <el-table-column
                :label="$t('outboundOrderLang.pusher')"
                min-width="150"
                align="center"
                prop="pusher"
              />
              <el-table-column
                :label="$t('pushDate')"
                min-width="150"
                align="center"
                prop="pushDate"
              />
            </el-table>
          </el-tab-pane>
          <!-- 计费日志 -->
          <!-- <el-tab-pane :label="$t('outboundOrderLang.billingLog')" name="4">
            <el-table
              v-loading="billingLogLoading"
              :data="billingLogData"
              border
              class="mt-10"
            >
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.goodsName')"
                prop="skuName"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('harvestLang.deliveryQuantity')"
                prop="skuNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.transitReceipts')"
                prop="transReceivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.receivedNumberOfDestination')"
                prop="receivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelfStockingNum"
                align="center"
              />
            </el-table>
          </el-tab-pane> -->
          <!-- 订单图片 -->
          <!-- TODO -->
          <el-tab-pane :label="$t('outboundOrderLang.orderPicture')" name="5">
            <div><img src="" alt=""></div>
          </el-tab-pane>
          <!-- 投保记录 -->
          <el-tab-pane
            :label="$t('outboundOrderLang.insuranceRecord')"
            name="6"
          >
            <el-table v-loading="recordLoading" :data="recordData" border>
              <el-table-column
                type="index"
                :label="$t('tableIndex')"
                width="55"
                align="center"
                fixed="left"
              />
              <el-table-column
                :label="$t('OMSLang.insuredAmount')"
                min-width="150"
                align="center"
                prop="goodsName"
              />
              <el-table-column
                :label="$t('OMSLang.insuredProportion')"
                min-width="150"
                align="center"
                prop="goodsSkuCode"
              />
              <el-table-column
                :label="$t('OMSLang.premium')"
                min-width="150"
                align="center"
                prop="customCode"
              />
            </el-table>
          </el-tab-pane>
          <!-- 内部轨迹 -->
          <!-- <el-tab-pane
            :label="$t('outboundOrderLang.internalHomingTrace')"
            name="7"
          >
            <el-table :data="internalHomingTraceData" border>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
                fixed="left"
              />
              <el-table-column
                label="产品名称"
                min-width="150"
                align="center"
                prop="goodsName"
              />
              <el-table-column
                label="SKU"
                min-width="150"
                align="center"
                prop="goodsSkuCode"
              />
              <el-table-column
                label="自定义代码"
                min-width="150"
                align="center"
                prop="customCode"
              />
              <el-table-column
                label="申报价格"
                min-width="150"
                align="center"
                prop="declaredCnyPrice"
              />
              <el-table-column
                label="数量"
                min-width="150"
                align="center"
                prop="goodsQuantity"
              />
              <el-table-column
                label="重量KG"
                min-width="150"
                align="center"
                prop="skuWeight"
              />
              <el-table-column
                label="体积CM"
                min-width="150"
                align="center"
                prop="skuVolume"
              />
            </el-table>
          </el-tab-pane> -->
          <!-- 官方轨迹 -->
          <!-- <el-tab-pane
            :label="$t('outboundOrderLang.officialTrajectory')"
            name="8"
          >
            <el-table :data="officialTrajectoryData" border>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
                fixed="left"
              />
              <el-table-column
                label="产品名称"
                min-width="150"
                align="center"
                prop="goodsName"
              />
              <el-table-column
                label="SKU"
                min-width="150"
                align="center"
                prop="goodsSkuCode"
              />
              <el-table-column
                label="自定义代码"
                min-width="150"
                align="center"
                prop="customCode"
              />
              <el-table-column
                label="申报价格"
                min-width="150"
                align="center"
                prop="declaredCnyPrice"
              />
              <el-table-column
                label="数量"
                min-width="150"
                align="center"
                prop="goodsQuantity"
              />
              <el-table-column
                label="重量KG"
                min-width="150"
                align="center"
                prop="skuWeight"
              />
              <el-table-column
                label="体积CM"
                min-width="150"
                align="center"
                prop="skuVolume"
              />
            </el-table>
          </el-tab-pane> -->
          <!-- 摘要 -->
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deliveryStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import {
  getOutboundOrderInfo,
  getOutboundOrderGoodsInfo,
  getOutboundOrderStatusLog
} from '@/api/WMS-order/outboundOrder'

export default {
  name: 'InfoForm',
  props: {
    value: {
      type: Number,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看
    }
  },
  data() {
    return {
      Tag: ['danger', 'success'],
      detailDataForm: {},
      goodsLoading: false,
      goodsData: [], // 订单产品
      logLoading: false,
      logData: [], // 操作记录
      orderLogLoading: false,
      orderLogData: [], // 订单日志
      apiData: [], // 订单api 日志
      apiLoading: false,
      billingLogLoading: false,
      billingLogData: [], // 计费日志
      recordData: [], // 投保记录
      recordLoading: false,
      internalHomingTraceData: [], // 内部轨迹
      officialTrajectoryData: [], // 官方轨迹
      getTitleByValue: getTitleByValue,
      deliveryStatusDict: deliveryStatusDict,
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict) // 状态下拉
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
          this.getOutboundOrderGoodsInfo()
          this.getOutboundOrderStatusLog()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 基础信息
    async getData() {
      if (!this.value) return
      const res = await getOutboundOrderInfo({
        orderId: this.value
      })
      if (!res || res.data === null) return
      this.detailDataForm = res.data
      console.log(res.data, '回显')
    },
    // 订单产品
    async getOutboundOrderGoodsInfo() {
      const { data } = await getOutboundOrderGoodsInfo({
        orderId: this.value
      })
      console.log(data, '订单商品')
      this.goodsData = data
    },
    // 操作记录
    async getOutboundOrderStatusLog() {
      const { data } = await getOutboundOrderStatusLog({
        orderId: this.value
      })
      console.log(data, '操作记录')
      this.logData = data
    },
    // // 装箱清单详情
    // async getDeliveredOrderBoxList() {
    //   const { data } = await getDeliveredOrderBoxList({
    //     orderId: this.value,
    //   });
    //   console.log(data, "装箱清单");
    //   this.packingListData = data.boxPageDTOList;
    // },
    // // 入库单箱明细
    // async getDeliveredOrderBoxSkuList() {
    //   const { data } = await getDeliveredOrderBoxSkuList({
    //     orderId: this.value,
    //   });
    //   console.log(data, "入库单箱明细");
    //   this.boxDetailData = data.boxSkuDTOList;
    // },
    // // 入库单产品明细
    // async getDeliveredOrderSkuList() {
    //   const { data } = await getDeliveredOrderSkuList({
    //     orderId: this.value,
    //   });
    //   console.log(data, "入库单产品明细");
    //   this.productsDetailData = data.boxSkuDTOList;
    // },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
::v-deep .el-descriptions__header {
  margin-top: 20px;
}
</style>
